<template>
    <div class="FolderTree" :style="`height:${height}`">
        <div class="FolderTree-title">
            文件夹
            <i class="el-icon-refresh" @click="getList"></i>
        </div>
        <div class="FolderTree-tree" @contextmenu="rclick">
            <el-tree ref="elFolderTree" node-key="id" v-loading="loading" :data="dataList" :props="{ children: 'children', label: 'folder_name' }" highlight-current :expand-on-click-node="false"
                default-expand-all @current-change="currentChange"></el-tree>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    nextTick,
    onMounted,
    reactive,
    ref,
    toRefs,
} from "vue";
import { useStore } from "vuex";
import TreeTool from "@/lib/TreeTool";
import http from "@/lib/http/http";
/**
 * state 数据类型
 */
interface IState {
    loading: boolean;
    /**
     * 数据列表
     */
    dataList: any[];
}
export default defineComponent({
    name: "FolderTree",
    props: {
        height: {
            type: String,
            default: "auto",
        },
        // 默认选择第一个
        defaultChange: {
            type: Boolean,
            default: false,
        },
    },
    emits: ["change"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const elFolderTree: any = ref<any>();
        const treeTool: TreeTool = new TreeTool(); // 树工具
        const state = reactive<IState>({
            loading: false,
            dataList: [],
        });
        // 当前选中节点变化时触发的事件
        const currentChange = (row: any, Node: any): any => {
            emit("change", row);
        };
        // 右键点击
        const rclick = () => {
            elFolderTree.value.setCurrentKey(null);
            currentChange(null, null);
        };
        /**
         * 获取内容
         */
        const getList = () => {
            state.loading = true;
            http.Get(`/folder`)
                .then((data: any) => {
                    state.dataList = treeTool.listToTree(data, "");
                    if (state.dataList.length > 0 && props.defaultChange) {
                        nextTick(() => {
                            elFolderTree.value.setCurrentKey(
                                state.dataList[0].id
                            );
                            currentChange(state.dataList[0], null);
                        });
                    }
                    state.loading = false;
                })
                .catch((err: any) => (state.loading = false));
        };

        onMounted(() => {
            getList();
        });
        return {
            UIAuth,
            bodySize,
            elFolderTree,
            ...toRefs(state),
            getList,
            rclick,
            currentChange,
        };
    },
});
</script>


<style scoped lang="scss">
.FolderTree {
    height: 100%;
    &-title {
        position: relative;
        text-align: center;
        //height:25px;
        line-height: 30px;
        background-color: $text-gray2-color;
        color: $text-secondary-color;
        font-weight: bold;
        & > i {
            cursor: pointer;
            position: absolute;
            right: 10px;
            font-size: 20px;
            padding: 6px 0;
            transition: all 0.3s ease-in;
            &:hover {
                transform: rotate(-180deg) scale(1.1);
            }
        }
    }
    &-tree {
        height: calc(100% - 30px);
        border: 1px $text-gray2-color solid;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
</style>